<template>
  <span>
    <template v-if="item.inputType === 0 ">
      <el-input
        v-if="item.inputLimit === 0"
        v-model="item.value"
        :maxlength="256"
        :placeholder="item.name"
        :disabled="isDisabled"
        type="text"
        class="width240"
        size="small" />
      <el-input
        v-else
        v-model="item.value"
        :placeholder="item.name"
        :disabled="isDisabled"
        type="number"
        oninput="if(value>999999999)value=999999999;"
        class="width240"
        size="small"
        @change="numberInputChange(item, 'value')" />
    </template>
    <el-select
      v-else
      v-model="item.value"
      :placeholder="item.name"
      :disabled="isDisabled"
      popper-class="global-select-down"
      class="width240"
      clearable
      size="small">
      <el-option
        v-for="item in item.options"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
    </el-select>
  </span>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    numberInputChange(row, key) {
      if (row[key]) {
        row[key] = Number(row[key]) % 1 === 0 ? Number(row[key]) : Number(row[key]).toFixed(3);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
  &::v-deep {
    .el-select {
      width: 240px;
    }
    .el-input__inner {
      width: 240px;
      height: 32px;
    }
    .el-tag.el-tag--info {
      color: #406eff !important;
      background: #eff3fb;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
